<!-- 首页组件 -->
<template>
  <div class="home-index" v-infinite-scroll="loadMore" infinite-scroll-distance="10">
    <Swipe @changeColor="parentColorFn"/>
    <!-- 背景颜色随着轮播图的切换而切换 -->
    <div class="index-header" :style="colorObj" v-if="showbg"></div>
    <div
      style="
        height: 8.8rem;
        width: 100%;
        background: green;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
      "
      v-else
    ></div>
    <div class="container-wrap" style="position: relative; top: 10rem">
      <HomeQuick/>
      <HomeNews/>
    </div>
    <div class="container-wrap" style="position: relative; top: 11rem">
      <MiaoSha/>
    </div>

    <!-- 精选  社区  新品  热卖 -->
    <div class="container-wrap" style="position: relative; top: 2rem;background:none">
      <!-- 精选  社区  新品  热卖 tabs切换 -->
      <div class="homeTabs">
        <ul>
          <li
            v-for="(homeTabList, index) in homeTabLists"
            :key="homeTabList.id"
            @click="changeHomeTabs(index,homeTabList.type)"
          >
            <h4>{{ homeTabList.title }}</h4>
            <p :class="homeTabIndex == index ? 'active' : ''">{{ homeTabList.tips }}</p>
          </li>
        </ul>
      </div>

      <!-- 产品列表-父子组件传值 -->
      <HomeList :lists="comHomeListDatas"/>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Swipe from "@/components/Swipe/Swipe.vue";
import HomeQuick from "../components/HomeQuick.vue";
import HomeNews from "../components/HomeNews.vue";
import MiaoSha from "../components/HomeMiaoSha.vue";
import HomeList from "../components/HomeList.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Swipe,
    HomeQuick,
    HomeNews,
    MiaoSha,
    HomeList
  },
  data() {
    //这里存放数据
    return {
      showbg: true,
      colorObj: {
        background: "red"
      },
      colorArr: [
        {
          background: "red"
        },
        {
          background: "green"
        },
        {
          background: "blue"
        }
      ],
      homeTabIndex: 0,
      homeTabLists: [
        {
          id: 1,
          title: "精选",
          tips: "为你推荐",
          type: "is_best"
        },
        {
          id: 2,
          title: "社区",
          tips: "新奇好物",
          type: ""
        },
        {
          id: 3,
          title: "新品",
          tips: "潮流上新",
          type: "is_new"
        },
        {
          id: 4,
          title: "热卖",
          tips: "火热爆款",
          type: "is_hot"
        }
      ],
      page: 1,
      size: 10,
      type: "is_best"
    };
  },
  //方法集合
  methods: {
    //父组件中接收子组件广播的数据
    parentColorFn(data) {
      // console.log("首页home-index" + data);
      this.colorObj = this.colorArr[data];
    },
    scrollPage() {
      // console.log(document.documentElement.scrollTop);
      var oTop = document.documentElement.scrollTop;
      if (oTop > 100) {
        this.showbg = false;
      } else {
        this.showbg = true;
      }
    },
    changeHomeTabs(index, type) {
      this.homeTabIndex = index;
      this.type = type;
      this.page = 1;
      this.$store.state.homeListDatas = [];
      this.$store.dispatch("actChangeHomeListDatas", {
        page: this.page,
        size: this.size,
        type: this.type
      });
    },
    getHomeListDatasFn() {
      this.$store.dispatch("actChangeHomeListDatas", {
        page: this.page,
        size: this.size,
        type: this.type
      });
    },
    loadMore() {
      // console.log("loadMore函数");
      this.getHomeListDatasFn();
      this.page++;
    }
  },
  computed: {
    comHomeListDatas() {
      return this.$store.state.homeListDatas;
    }
  },
  mounted() {
    //生命周期只执行一次

    //addEventListener("时间名",函数,false) 事件绑定 //false事件冒泡   true事件捕获
    window.addEventListener("scroll", this.scrollPage, false);
  },
  destroyed() {
    // 组件销毁要解绑事件
    // removeEventListener 事件解绑
    window.removeEventListener("scroll", this.scrollPage, false);
  }
};
</script>
<style lang="less">
.home-index {
  margin-bottom: 8rem;
  .index-header {
    width: 100%;
    height: 14.8rem;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    position: fixed;
    top: 0;
    left: 0;
  }
  .homeTabs {
    ul {
      display: flex;
      height: 4.4rem;
      justify-content: center;
      align-items: center;
      li {
        flex: 1;
        text-align: center;
        h4 {
          font-size: 1.6rem;
        }
        p {
          font-size: 1.2rem;
          line-height: 2rem;
          width: 80%;
          margin-left: 10%;
        }
        .active {
          background: #f55;
          border-radius: 1rem;
          color: #fff;
        }
      }
    }
  }
}
</style>